<template>
  <div>
    <div class="main_content">
      <el-input
        style="width:200px;"
        clearable
        v-model="searchText"
        placeholder="请输入查询关键字"
        @keydown.enter.native="doSearch()"
      ></el-input>
      <el-button type="primary" @click="doSearch()" class="added">
        <i class="el-icon-search"></i>
        搜索
      </el-button>
      <el-button style="margin-left:100px;" type="primary" @click="toAdd()">
        <i class="el-icon-circle-plus-outline"></i>
        新增
      </el-button>
      <!-- <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top:10px;"
        :header-cell-style="tableHeaderStyle"
        @selection-change="handleSelectionChange"
        >
        <el-table-column prop="name" label="供应商" align="center"></el-table-column>
        <el-table-column prop="date" label="编号" align="center"></el-table-column>
        <el-table-column prop="name" label="采购" align="center"></el-table-column>
        <el-table-column prop="date" label="营业状况" align="center"></el-table-column>
        <el-table-column prop="name" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.$switch, scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$switch, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          small
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="thePageSize"
          layout="total, prev, pager, next, jumper"
          :total="myTotal"
        ></el-pagination>
      </div> -->
      <myTable
        auto='getAllList'
        style='margin-top:20px'
        :height='Height-260'
        min-width='130'
        :myColumn=tableProp
        ahide='index,checkbox,mySplitPage,tooltip,background'
        slots='操作,250,right'
        @select='console'
        hook:created=' myTable.tableData = tableData '
      >
        <template slot-scope='button'>
          <el-button type="primary" size="mini" @click="handleEdit(button.scope.$index, button.scope.row)">
            <i class="el-icon-edit"></i>
            编 辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(button.scope.$index, button.scope.row)">
            <i class="el-icon-circle-close"></i>
            删 除
          </el-button>
        </template>
      </myTable>
    </div>
    <el-dialog v-dialogDrag ref="dialog_isDelete" title="提示" :visible.sync="isDelete" width="32%">
      <span>是否删除此供应商！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doDelete()">确 定</el-button>
        <el-button @click="isDelete == false">取 消</el-button>
      </span>
    </el-dialog>
    <!--新增或编辑-->
    <el-dialog v-dialogDrag ref="dialog_isAdd" :title="addOrEdit" :visible.sync="isAdd" width="40%">
      <el-form :model="theAdd" :rules="rules" ref="ruleForm" label-width="150px">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="theAdd.supplierName" placeholder="请输入供应商名称" clearable style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="采购" prop="purchase">
          <el-input v-model="theAdd.purchase" placeholder="请输入采购" clearable style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="营业状况" prop="businessState">
          <el-select v-model="theAdd.businessState" clearable style="width:80%" placeholder="请选择营业状况">
            <el-option label="营业" :value="1"></el-option>
            <el-option label="停业" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="编号" prop="supplierNumber">
          <el-input v-model="theAdd.supplierNumber" placeholder="请输入编号" clearable style="width:80%"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="创建时间" prop="goods_number">
          <el-input v-model="theAdd.goods_number" placeholder="请输入创建时间" clearable style="width:80%"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doAdd('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
export default {
  data() {
    return {
      loading: "",
      tableHeaderStyle: {
        //表头样式
        "background-color": "rgb(242,242,242)"
      },
      multipleSelection: [], //多选
      theRow: {}, //当前行数据
      theIndex: 0, //当前下标
      multiIDS: [], //多选
      theAdd: {}, //新增数据
      isAdd: false, //是否新增
      isDelete: false, //是否删除
      hasMultiDelete: false, //是否多选
      searchText: "", //搜索字段
      myTotal: 1, //分页总条数，默认1
      currentPage: 1, //初始化当前页
      nowPage: 1, //当前页
      thePageSize: 15, //每页条数
      addOrEdit: "新增供应商", //新增或编辑标题
      tableData: [],
      rules: {
        //表单验证
        supplierName: [
          { required: true, message: "请输入供应商名", trigger: "blur" },
          // { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
        ],
        purchase: [
          { required: true, message: "请输入采购信息", trigger: "blur" }
        ],
        supplierNumber: [
          { required: true, message: "请输入编号", trigger: "blur" }
        ],
        businessState: [
          { required: true, message: "请选择营业状况", trigger: "change" }
        ],
      },
      tableProp: [
        { label: "供应商", prop: "supplierName" },
        { label: "编号", prop: "supplierNumber" },
        { label: "采购", prop: "purchase" },
        { label: "营业状况", prop: "businessState",  html(prop) {
          return prop  === 1 ? '<span style=color:green>营业</span>' : '<span style=color:red>停业</span>';
        }},
        { label: "创建时间", prop: "createTime" },
      ],
    };
  },
  components: {},
  methods: {
    //项目管理 新增或修改 供应商选择 自定义
    toSure() {

    },
    handleMultiDelete() {
      //调起删除弹窗
      this.isDelete = true;
    },
    handleDelete(index, row) {
      //调起删除弹窗
      this.isDelete = true;
      this.theRow = row;
      // this.multiIDS.push(row.role_id);
    },
    doDelete: async function() {
       var res = await $.post('deleteSupplier',{
       supplierId: this.theRow.supplierId
      });
      this.isDelete = false;
      this.getAllList();
    },
    doAdd(formName) {
      //修改或新增
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.addOrEdit == "新增供应商") {
            this.addFunction(); //新增
          } else {
            this.editFunction(); //修改
          }
        } else {
          msgWarning(this, "请填写必要信息！");
          return false;
        }
      });
    },
    addFunction: async function() {
      var res = await $.post('addSupplier',{
        supplierName: this.theAdd.supplierName,
        purchase: this.theAdd.purchase,
        businessState: this.theAdd.businessState
      });
      this.isAdd = false;
      this.getAllList();
    },
    editFunction: async function() {
      var res = await $.post('editSupplier',{
        supplierId: this.theAdd.supplierId,
        supplierName: this.theAdd.supplierName,
        purchase: this.theAdd.purchase,
        businessState: this.theAdd.businessState
      });
      this.isAdd = false;
      this.getAllList();
    },
    toAdd() {
      //调起新增弹窗
      this.addOrEdit = "新增供应商";
      this.isAdd = true;
      this.theAdd = {};
    },
    handleEdit(index, row) {
      //调起编辑弹窗
      this.theAdd = row;
      this.addOrEdit = "编辑供应商";
      this.isAdd = true;
    },
    doSearch() {
      //搜索方法
      this.getAllList();
    },
    handleSelectionChange(val) {
      //处理多选
      this.multipleSelection = val;
      this.multiIDS = val.map(element => element.id);
      this.hasMultiDelete = val.length !== 0;
    },
    handleCurrentChange(val) {
      //分页查询
      this.nowPage = val;
      this.getAllList();
    },
    goBack() {
      this.$router.go(-1);
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
   getAllList: async function(pageNum,pageSize) {
    var res = await $.post('getAllSupplier',{
        pageNum, //当前页
        pageSize,//每页显示条数
        searchText: this.searchText//搜索文本
      });
      $return('__',res);
      // if(!res.success) return $.msgError(res.msg||'error!');
    },
  },
  created() {
    // this.getAllList();
  },
  mounted() {}
};
</script>
<style scoped>
.active_crumb {
  color: rgb(90, 160, 230);
}
</style>


